<script setup>
const { proxy } = getCurrentInstance();
import { TreeListAPI } from "@/api/mold/edger";
const { sys_tool_staus } = proxy.useDict("sys_tool_staus");

/**
 * 传入数据
 */
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  title: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

/**
 * 树结构
 */
const dataTree = ref([]);

/**
 * 表单实例
 */
const ruleFormRef = ref(null);
/**
 * 树结构枚举
 */
const defaultProps = {
  children: "children",
  label: "categoryName",
  value: "id",
};
// 表单字段
const ruleForm = reactive({
  type: "",
  status: "",
  remark: "",
});

/**
 * 表单校验
 */
const rules = reactive({
  mouldName: [{ required: true, message: "请填写模具名称", trigger: "change" }],
  mouldType: [{ required: true, message: "请选择模具类型", trigger: "change" }],
  mouldSpecification: [
    { required: true, message: "请填写模具型号", trigger: "change" },
  ],
  status: [{ required: true, message: "请选择模具状态", trigger: "change" }],
  mouldCode: [{ required: true, message: "请填写模具编码", trigger: "change" }],
});

/**
 * 类别下拉树结构
 */
const getTreeList = async () => {
  try {
    const { data: res } = await TreeListAPI();
    dataTree.value = res;
  } catch (err) {
    console.log(err);
  }
};
getTreeList();

/**
 * 提交方法
 */
const submit = async () => {
  const valid = await ruleFormRef.value.validate();
  if (!valid) return false;

  return ruleForm;
};

/**
 * 初始化数据
 */
const initData = () => {
  if (props.data?.id) {
    Object.keys(props.data).forEach(
      (itemKey) => (ruleForm[itemKey] = props.data[itemKey])
    );
  }
};

/**
 * 回显数据赋值
 */
initData();
defineExpose({ submit });
</script>

<template>
  <div class="app-container">
    <!-- 新增 表单 -->
    <el-form
      :model="ruleForm"
      label-width="120px"
      :rules="rules"
      status-icon
      inline
      ref="ruleFormRef"
    >
      <el-form-item label="模具名称" prop="mouldName">
        <el-input
          clearable
          v-model="ruleForm.mouldName"
          :disabled="props.disabled"
        />
      </el-form-item>
      <el-form-item label="模具类型" prop="mouldType">
        <el-tree-select
          v-model="ruleForm.mouldType"
          :props="defaultProps"
          :data="dataTree"
          :disabled="props.disabled"
          :render-after-expand="false"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="模具型号" prop="mouldSpecification">
        <el-input
          clearable
          v-model="ruleForm.mouldSpecification"
          :disabled="props.disabled"
        />
      </el-form-item>
      <!-- <el-form-item label="模具状态" prop="status">
        <p-select
          :option="sys_tool_staus"
          :disabled="props.disabled"
          v-model="ruleForm.status"
          placeholder="请选择维保级别"
        />
      </el-form-item> -->
      <el-form-item label="模具编号" prop="mouldCode">
        <el-input
          clearable
          v-model="ruleForm.mouldCode"
          :disabled="props.disabled"
        />
      </el-form-item>
      <el-form-item label="制造厂商" prop="factoryName">
        <el-input
          clearable
          v-model="ruleForm.factoryName"
          :disabled="props.disabled"
        />
      </el-form-item>
      <el-form-item label="出厂年月">
        <el-date-picker
          v-model="ruleForm.factoryDate"
          type="date"
          clearable
          format="YYYY-MM-DD"
          :default-time="defauleTime"
          :disabled="props.disabled"
        />
      </el-form-item>
      <el-form-item label="安装时间">
        <el-date-picker
          v-model="ruleForm.installationTime"
          clearable
          :disabled="props.disabled"
          type="date"
          format="YYYY-MM-DD"
          :default-time="defauleTime"
        />
      </el-form-item>
      <el-form-item label="使用寿命">
        <el-input-number
          clearable
          :min="1"
          v-model="ruleForm.serviceLife"
          :disabled="props.disabled"
        />
      </el-form-item>
      <el-form-item label="展示顺序">
        <el-input-number
          clearable
          v-model="ruleForm.mouldSort"
          :disabled="props.disabled"
        />
      </el-form-item>
      <div class="rk">
        <el-form-item label="模具照片">
          <p-imageUpload
            v-model="ruleForm.fileImagePath"
            v-if="!props.disabled"
          />

          <p-imagePreview :src="ruleForm.fileImagePath" v-else />
        </el-form-item>
      </div>
      <el-form-item label="文件附件">
        <p-fileUpload
          v-model="ruleForm.fileAttachmentPath"
          v-if="!props.disabled"
        />
        <p-downloadFile :fileList="ruleForm.fileAttachmentPath" v-else />
      </el-form-item>
      <div class="rk">
        <el-form-item label="备注" prop="remark">
          <el-input
            :rows="4"
            type="textarea"
            clearable
            v-model="ruleForm.remark"
            :disabled="props.disabled"
          />
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
</style>
